<template>
	<view class="flex flexC flexW bgff">
		<view class="item aliC mb12 px12 boxS flex flexC flexCol flexJC" 
			:class="{active:item.active,curClass: item.curClass,disabled:item.disabled}" 
			v-for="(item, index) in list"
			:key="index" @click="clickItem(item,index)">
			<view>{{item.start}}</view>
			<view> - </view>
			<view class="c66 fs10 ">{{item.end}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listTime:{
				type: Array,
				default:[]
			},
			checkTime: {
				type: Array,
				default: () => [{
						start: '',
						end: ''
					},
					{
						start: '',
						end: ''
					}
				]
			},
			meetingDate: {
				type: String,
				default: ''
			},
			start: {
				type: Number,
				default: 0,
				validator: function(value) {
					return (value >= 0 && Number.isInteger(value))
				}
			},
			end: {
				type: Number,
				default: 24,
				validator: function(value) {
					return (value <= 24 && Number.isInteger(value))
				}
			}
		},
		data() {
			return {
				list: [],
				clickNumber: 0,
				disabledList: [],
				indexArr: [],
			}
		},
		mounted() {
			this.list = this.listTime;
			//this.initTime();
		},
		watch: {
			listTime(newVal, oldVal) {
				this.list = newVal;
			}
		},
		computed: {
			timeList() {
				let list = this.list.filter(item => { return item.active });
				let obj = {
					startTime: '',
					endTime: ''
				}
				if (list.length) {
					obj.startTime = list[0].start;
					obj.endTime = list[list.length - 1].end;
					this.$nextTick(() => {
						this.list.map(item => {
							item.curClass = item.start == obj.startTime || obj.endTime == item.end;
						})
					})
				}
				return obj;
			}
		},
		methods: {
			// 根据当前日期和已选则时间列表处理选择禁用
			setDisabled() {
				this.checkTime.forEach(item => {
					this.disabledList.push(this.getTimeArr(item.start, item.end))
				})
				let currentTime = new Date();
				this.list.forEach(item => {
					this.disabledList.forEach(vitem => {
						const hasTime = vitem.find(d => d == item.time)
						const isBeforeTime = new Date(Date.parse(this.meetingDate + ' ' + item.time.split(
							'-')[0] + ':00')) < currentTime
						if (hasTime || isBeforeTime) {
							item.disabled = true
						}
					})
				})
			},
			// 根据开始结束时间获取数组中的项
			getTimeArr(start, end) {
				const list = []
				for (let home = this.start; home < this.end; home++) {
					const h = `${home}`.slice(-2)
					// , `${home+1}:00-${`0${home+2}`.slice(-2)}:00`
					list.push(`${h}:00-${home+1}:00`)
				}
				return list.slice(list.findIndex(v => v.startsWith(start)), list.findIndex(v => v.endsWith(end)) + 1)
			},
			// 构建时间数组               
			initTime() {
				const list = [];
				// 	for (let home = this.start; home < this.end; home++) {
				for (let home = 0; home < 24; home++) {
					const h = `${home}`.slice(-2)
					list.push({
						start: `${h}:00`,
						end: `${home+1}:00`,
						disabled: home < this.start || (home+1) > this.end,
						active: false,
						curClass: false
					})
				}
				this.list = list;
				console.log("==tt="+JSON.stringify(this.list));
				// this.setDisabled();
			},
			clickItem(item, index) {
				if (item.disabled) {
					return
				}
				this.clickNumber++;
				if (this.clickNumber == 1) {
					this.indexArr.push(index)
				}

				if (this.clickNumber == 2) {
					this.indexArr.push(index)
				}

				if (this.clickNumber == 3) {
					this.indexArr = [index]
				}
				this.indexArr = this.indexArr.sort((a, b) => a - b);
				if (this.clickNumber % 3 == 0) {
					this.clickNumber = 1
					this.list.forEach(v => v.active = false);
					item.active = true
				}
				
				console.info("===clickItem====="+JSON.stringify(item))
				console.info("===indexArr====="+JSON.stringify(this.list))
				
				this.getCheckList(item)
			},
			getCheckList(vitem) {
				try {
					
					this.list.forEach((item, idx) => {
						const [start, end] = this.indexArr
						if (idx >= start && idx <= end) {
							if (item.disabled) {
								throw new Error('end')
							}
							item.active = true
							
						}
					})
					
					//
				} catch (err) {
					this.list.forEach(v => v.active = false);
					vitem.active = true;
				}
				vitem.active = true;
				
				console.log('list-----',this.list);
				this.$forceUpdate();
				this.$emit('getTime', this.timeList)
			}
		}
	}
</script>

<style lang="scss">
	.item {
		width: 114rpx;
		height: 124rpx;
		line-height: 30rpx;
		>view {
			position: relative;
			z-index: 9;
		}
		&.active {
			position: relative;
			background: #F4F4F4;
			
			&.curClass {
				color: #fff;
				// border-radius: 20rpx;
				&::after {
					content: '';
					width: 100%;
					height: 100%;
					position: absolute;
					background-color: #333;
					border-radius: 20rpx;
					top: 0;
					left: 0;
					z-index: 0;
				}
			}
		}
		&.disabled {
			color: #999999;
			.c66 {color: #999999;}
		}
		
	}


	/* .item */
</style>